<template>
    <transition name="slide-fade" v-if="this.openAsideList" >
        <div class="the-aside"  style="user-select: none;" v-click-outside="handleBlur">
        <div class="head">
                <div class="title">
                播放列表
            </div>
        
            <delete-one class="delete-one" theme="outline" size="15" fill="#7C828F" @click="deleteList()"/>

            <div class="delete" @click="deleteList()">
                    清空
            </div>
        </div>

            <el-menu
                class="sidebar-el-menu"
                background-color="#f8f4f4"
                text-color="#283248"
                ref="myMenu"
                active-text-color="#F14F3D"
                :default-active="this.musicIndex"
                >
                <template v-for=" (item,index) in listSong">
                <template>
                    <el-menu-item :index="index" :key="index" class="item" @click="playMusic(item)">
                        <img :src="item.musicImg" class="img">
                        <span class="songName">{{ item.songName }}</span>
                        <span class="album">{{ item.album }}</span>
                        <span class="musictotaltime">{{ item.musictotaltime }}</span>
                    </el-menu-item> 
                </template>
                </template>

            </el-menu>
        </div>


       
    </transition>

</template>

<script>
import { mapGetters } from 'vuex';
import { DeleteOne } from '@icon-park/vue';
// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function (event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event);
      }
    };
    // 在文档上添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener("click", el.clickOutsideEvent);
  },
};
export default {

    directives: {
        "click-outside": clickOutside, // 注册自定义指令
    },
    components: {
        DeleteOne,
    },
    computed: {
        ...mapGetters([
           'openAsideList',
           'listSong',
            'musicIndex'
        ]),
    },
    data(){
       return{
            ifOpen:false,
            num:0,
       }
    }, 
    watch:{
        
    },
    methods:{
        deleteList(){
            alert('列表已经删除')
        },
         //点击其它区域
        handleBlur(event) {
            //设置num避免第一次点击时触发关闭页面的命令
            this.num  = this.num + 1;
            if(this.num === 2){
                this.$store.commit('setOpenAsideList',false)
                this.num = 0;
            }
        },
       playMusic(item){
        this.$store.commit('setUrl', item.url)
        this.$store.commit('setIsPlay', true)
        this.$store.commit('setType', 'on')
        this.$store.commit('setMusicTotalTime',item.musictotaltime)
        this.$store.commit('setMusicImg',item.musicImg)
        this.$store.commit('setSingerName',item.singerName)
        this.$store.commit('setSongName',item.songName)
       }

    }
    
}
</script>

<style scoped>
.the-aside{
    font-size: 14px;
    width: 350px;
    height: 750px;
    position: fixed;
    right: 0;
    top: 100px;
    z-index: 99;
    background-color: #f8f4f4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    overflow-y: auto;
    overflow-x :hidden
}

.the-aside:hover{

overflow-y:auto

}
.the-aside::-webkit-scrollbar{
   
  width: 8px;
}

.the-aside::-webkit-scrollbar-thumb {
      border-radius:5px;
      -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);
      background-color:#ffffff;
}
::-webkit-scrollbar-thumb:hover {
        background-color:#e0dfdf;
    }
.the-aside::-webkit-scrollbar-track {
    position: absolute;
    top: 20px;
    border-radius: 20px;
    background: #ffffff;
}
.head{
    position: sticky;
    top: 0;
    z-index: 100;
    width: 350px;
    height: 55px;
    background-color:#f8f4f4 ;
    z-index: 100;
}
.title{
    position:absolute;   
    left: 30px;
    top:20px;
    font-size: 18px;
    font-weight: bold;
    color: #283248;
}
.delete{
    position:absolute;
    right: 15px;   
    top:20px;
    font-size: 4px;
    color: #b4b4b4;
    font-weight: bold;
}
.delete-one{
    position:absolute;
    right: 45px;
    top:20px;
}
.item{
    height: 70px;
}

.img{
    position:absolute;
    width: 50px;
    border-radius: 15px;
    left: 30px;
    top: 10px;
}
.songName{
    position:absolute;
    left: 90px;
    top: -6px;
    font-size: 15px;
    
}
.album{
    position:absolute;
    left: 90px;
    top: 20px;
    font-size: 10px;
    
    text-align: left;
    width: 200px !important;
    float: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.musictotaltime{
    position:absolute;
    top: 6px;
    right: 8px;
    color: #283248;
}
</style>